<!DOCTYPE html>
<html lang="en">
    {% load static %}
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/xm-select-master/dist/xm-select.js"></script>
</head>

<body>
    <div class="utdm">
        <div class="utdm_mwuk">
            <a href="{% url 'rgck' %}"><img src="{% static 'img/loog.png' %}" class="utdm_img"></a>
            <div>
                {% if current_etyn == None %}
                <a href={% url 'logn' %}><span>登录</span></a>
                {% else %}
                <div>
                <ul class="layui-nav" lay-bar="disabled">
                    <li class="layui-nav-item" lay-unselect="">
                    <img src="/media/{{current_etyn.mtkg_img}}" class="layui-nav-img"></a>
                    <dl class="layui-nav-child">
                        <dd style="text-align: center;"><a href={% url 'tcdl' %}>退出登录</a></dd>
                    </dl>
                    </li>
                </ul>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="dmdm_ukwv">
        <div class="dmdm-left">
            <ul>
                <a href="{% url 'rgck' %}">
                    <li class="tfkh-uqjs01">歌曲管理</li>
                </a>
                <a href="{% url 'skuj_tpgj' %}">
                    <li class="tfkh-uqjs">歌单管理</li>
                </a>
                <a href="{% url 'etyn_tpgj' %}">
                    <li class="tfkh-uqjs01">用户管理</li>
                </a>
                <a>
                    <li class="tfkh-uqjs01">轮播管理</li>
                </a>
            </ul>
        </div>
        <div class="dmdm-rigth">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <a href="{% url 'skuj_tpgj' %}"><li>全部歌单</li></a>
                    <li class="layui-this">修改歌单</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item">
                        
                    </div>
                    <div class="layui-tab-item layui-show">
                        <form class="layui-form layui-form-pane" action="{% url 'skuj_whnt' %}" method="post" enctype="multipart/form-data" >
                            {% csrf_token %}
                            <input type='text' name='id' hidden='' value={{ovrn.skuj_id}}>
                            <div class="layui-form-item">
                                <label class="layui-form-label">图片</label>
                                <div class="layui-input-inline">
                                    <input type="file" name="whww_img" autocomplete="off" onchange="changeFile()"
                                        id="File" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux"><img <img src="/media/{{ovrn.skuj_img}}" width="140px" id="image"
                                        height="140px"></div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">歌单名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title_name" autocomplete="off" value={{ovrn.skuj_name}}
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">简介</label>
                                <div class="layui-input-block">
                                    <textarea name="tuwj" required lay-verify="required" class="layui-textarea">{{ovrn.skuj_ttwj}}</textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">歌曲选择框</label>
                                <div class="layui-input-block">
                                    <div id="demo1" class="xm-select-demo"></div>
                                </div>
                              </div>
                            <div class="layui-form-item">
                                <button class="layui-btn" lay-submit="" lay-filter="demo2">跳转式提交</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    function changeFile() {
        var image = document.getElementById("image");
        var address = document.getElementById("File").value;
        var name = document.getElementById("File").files[0];
        if (window.URL != undefined && name) {
            url = window.URL.createObjectURL(name);
        }
        image.src = url;
    } 
    $(function (){
        $.ajax({
            type:"POST",
            url:"wguk_skma",
            data:{'id':{{ovrn.skuj_id}}},
            headers: { "X-CSRFToken": "{{ csrf_token }}" },
            success:function(data1){
                data = data1.data
                date = data1.date
                console.log(data)
                console.log(date)
                var demo1 = xmSelect.render({
                    el: '#demo1', 
                    paging:true,
                    filterable: true,
                    initValue:date,
                    model: {
                        label: {
                            type: 'xxxx', //自定义与下面的对应
                            xxxx: {
                                template(data, sels){
                                    return "已选中 " + sels.length + " 项, 共 " + data.length + " 项"
                                }
                            }
                            },
                        },
                    data
                })
            }
        })
    })
</script>
<style>
    .utdm {
        width: 100%;
        height: 60px;
        position: fixed;
        border-bottom: 1px black solid;
        background-color: white;
    }

    .utdm_mwuk {
        width: 1080px;
        position: fixed;
        margin: auto;
        right: 0;
        left: 0;
        top: 0;
        display:flex;
        justify-content: space-between;
    }

    .layui-nav{
        background-color:#ffffff;
    }

    .utdm_img {
        height: 60px;
        width: auto;
    }

    .dmdm_ukwv {
        width: 1080px;
        margin: 0 auto;
    }

    .dmdm-left {
        width: 200px;
        height: 100vh;
        border-right: 1px black solid;
        float: left;
    }

    .dmdm-rigth {
        padding-top: 60px;
        width: 870px;
        float: right;
    }

    .dmdm-left ul {
        padding-top: 60px;
    }

    .dmdm-left ul a li {
        width: 100%;
        height: 50px;
        font-size: 18px;
        text-align: center;
        line-height: 50px;
    }

    .tfkh-uqjs {
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.74));
        color: white;
    }

    .tfkh-uqjs01:hover {
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.74));
        color: white;
    }
</style>

</html>